<template>
  <div class="dashboard-container">
    <el-card>
      <!-- //^顶部搜索 -->
      <topBar :dialog="dialogVisible" @changDialog="dialogVisible = $event" @getUserList="getUserList()" @change="userInfo.query = $event" />
      <!-- //^用户列表区-->
      <userList :user="userInfo" :data="userlist" @showEditDialog="showEditDialog" @setRole="setRole" @upData="upData" />
      <!-- //^分页区域 -->
      <elPagination :obj="userInfo" :total="total" :sizes="sizes" @sizeChange="handleSizeChange" @currentChange="handleCurrentChange" />
    </el-card>
    <!-- //^添加用户的对话框 -->
    <addDialog v-model="dialogVisible" @changeVisible="dialogVisible = $event" />
    <!-- //^修改用户的对话框 -->
    <addDialog ref="editDialog" v-model="editDialogVisible" :flag="false" @changeVisible="editDialogVisible = $event" />
    <!-- //^分配角色的对话框 -->
    <setRoleDialog ref="roleDialog" v-model="setRoleDialogVisible" g @changeVisible="setRoleDialogVisible = $event" />
  </div>
</template>

<script>
import { getUserList } from '@/api/user.js'
// 引入组件
import topBar from './components/topBar.vue'
import userList from './components/userList.vue'
import addDialog from './components/addEditDialog.vue'
import setRoleDialog from './components/setRoleDialog.vue'
import elPagination from '@/components/elPagination'

export default {
  components: {
    topBar,
    userList,
    addDialog,
    setRoleDialog,
    elPagination
  },
  data() {
    return {
      // 获取用户列表的参数对象
      userInfo: {
        // 查询参数
        query: '',
        // 当前的页数
        pagenum: 1,
        // 当前每页显示多少条数据
        pagesize: 2
      },
      // 用户列表数据
      userlist: [],
      // 用户列表总数据条数
      total: 0,
      sizes: [1, 2, 5, 10],
      // ^添加用户
      // 控制添加用户对话框的显示与隐藏
      dialogVisible: false,
      // ^修改用户
      // 控制修改用户对话框的显示与隐藏
      editDialogVisible: false,
      // ^分配角色
      // 控制分配角色对话框的显示与隐藏
      setRoleDialogVisible: false
    }
  },

  created() {
    this.getUserList()
  },

  methods: {
    // ^获取用户列表
    async getUserList() {
      try {
        const res = await getUserList(this.userInfo)
        // console.log(res)
        this.userlist = res.users
        this.total = res.total
        // this.$message.success('获取用户列表成功')
      } catch (err) {
        // this.$message.error('获取用户列表失败')
      }
    },
    // ^分页区域操作
    // 监听pagesize改变的事件
    handleSizeChange(newSize) {
      // console.log(newSize)
      this.userInfo.pagesize = newSize
      this.getUserList()
    },
    // 监听页码值改变的事件
    handleCurrentChange(newPage) {
      // console.log(newPage)
      this.userInfo.pagenum = newPage
      this.getUserList()
    },
    // ^修改用户资料
    // 展示编辑用户的对话框
    showEditDialog(id) {
      // console.log(id)
      this.$refs.editDialog.editUserData(id)
    },
    // ^删除
    upData(val) {
      // console.log(val)
      if (this.userlist.length === 1) {
        this.userInfo.pagenum = val
      }
      this.getUserList()
    },
    // ^分配角色
    // 展示分配角色的对话框
    setRole(obj) {
      // console.log(obj) //用户信息
      this.$refs.roleDialog.getData(obj)
    }
  }
}
</script>

<style scoped lang='less'>
.el-table {
  margin-top: 15px;
  font-size: 12px;
}
.el-pagination {
  margin-top: 15px;
}
</style>
